require('../css/common/normalize.css')
require('../css/common/reset.css')
require('../css/common/property.css')
require('../css/common/basic.less')
require('../lib/fonts/iconfont.css')

require('../css/motion-train2.less') 

//导入axios
const axios = require("axios");

//导入weui
require("weui")
const weui = require("weui.js")


// 点击结束时出现蒙层
const trainStop=document.querySelector('#train-stop')  //暂停训练
const mask=document.querySelector('#mask')             //模态框，蒙层
const outStart=document.querySelector('#outDoor-start')//继续训练
const outStop=document.querySelector('#outDoor-stop')  //结束训练
const trainNum=document.querySelector('#trainNum')     //训练视频总数
const videoUrl=document.querySelector('#videoUrl')     //训练视频
const title=document.querySelector('#title')           //视频标题
const listenPre=document.querySelector('#listenPre')   //上一曲
const listenNext=document.querySelector('#listenNext') //下一曲
const trainNow=document.querySelector('#trainNow')     //第几个训练视频
const imgUrl=document.querySelector('#imgUrl')         //模态框的视频图片
const progress=document.querySelector('#progress')         //进度条

//获取临时存储里面的数据
let fragments=JSON.parse(sessionStorage.getItem('fragments'))
console.log(fragments);

//获取项目总数
trainNum.textContent=fragments.length

//初始视频的索引
let index=0

//运动时间
let time=0

//计时器id
let timeId=null

//动态获取的单渲染   但是要多次调用，所以我们用函数来保存，就可以复用

trainDatas()
function trainDatas(){
    //视频的渲染
    videoUrl.src='http://139.9.177.51:8099'+fragments[index].videoUrl
    //videoUrl.autoplay=true

    //视频名字的渲染
    title.textContent=fragments[index].title
    
    //上一个和下一个  点击上一个和下一个的时候视频自动播放下一个

    //渲染当前节数
    trainNow.textContent=index+1

    //模态框视频图片
    imgUrl.src='http://139.9.177.51:8099'+fragments[index].imgUrl

    //
}


//点击上一个的时候视频自动播放上一个

listenPre.addEventListener('click',function(){
    index--
    console.log(index);
    if(index==-1){
        index=fragments.length - 1
    }
    console.log(index);
    //渲染函数
    trainDatas()
})


//点击下一个的时候视频自动播放下一个
listenNext.addEventListener('click',function(){
    index++
    if(index==fragments.length){
        index=0
    }
    //渲染函数
    trainDatas()

})

//进度条制作
videoUrl.addEventListener('timeupdate',function(){

    //总时间
    let client=videoUrl.duration
    console.log(client);

    //获取当前时长
    let nowClient=videoUrl.currentTime

    //获取当前宽度
    let nowWidth=nowClient*100/client

    //将当前宽度赋值给进度条宽度
    progress.style.width=nowWidth + '%'

})

//暂停训练
trainStop.addEventListener('click',function(){
    console.log('12503');
    videoUrl.pause();
    mask.style.display="flex"
    clearTimeout(timeId)

})

//点击继续训练隐藏蒙层
outStart.addEventListener('click',function(){
    mask.style.display="none"
    videoUrl.play();
    timeAddTime()

})

//点击结束跳转到课程介绍
outStop.addEventListener('click',function(){

   console.log(1425);
   let params={
       id:sessionStorage.cid,
       userId:localStorage.userId,
       takeTime:time,
       calorie:time*0.55
   }
   axios.post('http://139.9.177.51:8099/sports/saveTrain',params)
   .then(function(res){
       console.log(res.data.status);
       if(res.data.status==0){
           //请求成功后
           weui.toast(`消耗${params.calorie.toFixed(2)}卡路里`)
           location.href='./motion-train.html'

       }else{
        weui.alert('要继续加油哦')
       }
   })
    
})


//自动播放下一个视频
videoUrl.addEventListener('ended',function(){
    weui.toast("即将播放下一节课程")
    setTimeout(function(){
        listenNext.click()
    },2000)
})


//我们要将数据保存在后台，现在又有两个数据没有出现
//现在我们要将运动数据弄出来  就是运动的时间还有卡路里

timeAddTime()
function timeAddTime(){
    timeId=setInterval(function(){
        //我们要得到数据运动总时长，还有消耗的卡路里
        time++
    },1000)
}



